<template>
  <div class="search">
    <!-- 搜索框位置 -->
    <div class="search-box-wrapper">
      <search-box ref="searchBox" @query="onQueryChange"/>
    </div>

    <!-- 热门数据以及搜索历史位置 -->
    <div v-show="!query" ref="shortcutWrapper" class="shortcut-wrapper">
      <scroll ref="shortcut" :data="shortcut" :refresh-delay="refreshDelay" class="shortcut">
        <div>
          <!-- 热门搜索位置 -->
          <div class="hot-key">
            <h1 class="title">热门搜索</h1>
            <ul class="hotKeylist">
              <li v-for="(item, index) in hotKey" :key="index" :data-index="item.n" class="item" @click="addQuery(item)">{{ item.k }}</li>
            </ul>
          </div>

          <!-- 搜索历史位置 -->
          <div v-show="searchHistory.length" class="search-history">
            <h1 class="title">
              <span class="text">搜索历史</span>
              <span class="clear" @click="showConfirm"><i class="icon-clear"/></span>
            </h1>
            <div class="searchlistbox">
              <search-list :searches="searchHistory" @select="addQuery" @delete="deleteSearchHistory"/>
            </div>
          </div>

        </div>
      </scroll>
    </div>

    <!-- 检索结果 -->
    <div v-show="query" ref="searchResult" class="search-result">
      <suggest ref="suggest" :query="query" @listScroll="blurInput" @select="saveSearch"/>
    </div>

    <!-- 弹框组件 -->
    <confirm ref="confirm" text="是否删除历史记录?" cancel-btn-text="取消🙂" confirm-btn-text="确定🙁" @cancel="cancelBtn" @confirm="clearSearchHistory"/>

    <transition name="slide">
      <router-view/>
    </transition>
  </div>
</template>

<script>
import SearchBox from 'base/search-box/search-box'
import Scroll from 'base/scroll/scroll'
import { getHotKey } from 'api/search'
import { ERR_OK } from 'api/config'
import Suggest from 'components/suggest/suggest'
import { mapActions } from 'vuex'
import SearchList from 'base/search-list/search-list'
import Confirm from 'base/confirm/confirm'
import { playlistMixin, searchMixin } from 'common/js/mixin'
export default {
  mixins: [playlistMixin, searchMixin],
  data () {
    return {
      hotKey: []
    }
  },
  computed: {
    shortcut () {
      return this.hotKey.concat(this.searchHistory)
    }
  },
  created () {
    this._getHotKey()
  },
  methods: {
    // 热门搜索数据
    _getHotKey () {
      getHotKey()
        .then((result) => {
          // console.log(result)
          if (result.code === ERR_OK) {
            this.hotKey = result.data.hotkey
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    showConfirm () {
      this.$refs.confirm.show()
    },
    // deleteitem (item) {
    //   this.deleteSearchHistory(item)
    // },
    cancelBtn () {},
    // confirmBtn () {
    //   this.clearSearchHistory()
    // },
    handlePlaylist (playlist) {
      const bottom = playlist.length ? '60px' : '0'
      this.$refs.shortcutWrapper.style.bottom = bottom
      this.$refs.shortcut.refresh()
      this.$refs.searchResult.style.bottom = bottom
      this.$refs.suggest.refresh()
    },
    ...mapActions(['clearSearchHistory'])
  },
  watch: {
    query (newQuery, oldQuery) {
      // 这里是绝决用户搜索删除搜索框内容无法滚动
      // console.log(newQuery)
      // 空值进入
      if (!newQuery) {
        setTimeout(() => {
          // 手动刷新
          this.$refs.shortcut.refresh()
        }, 20)
      }
    }
  },
  components: { SearchBox, Scroll, Suggest, SearchList, Confirm }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
  .search
    .search-box-wrapper
      padding 20px;
    .shortcut-wrapper
      position fixed;
      top 168px;
      bottom 0;
      width 100%;
      overflow hidden;
      .shortcut
        height 100%;
        width 100%;
        .hot-key
          padding 0 20px;
          .title
            font-weight bold;
            font-size $font-size-medium;
            color $color-text-l;
            margin-bottom 10px;
          .hotKeylist
            .item
              display inline-block;
              background-color $color-highlight-background;
              color $color-text-d;
              padding 2px 4px;
              margin-right 6px;
              margin-bottom 6px;
              border-radius 6px;
        .search-history
          padding 0 20px;
          margin-top 20px;
          .title
            display flex;
            align-items center;
            justify-content space-between;
            margin-bottom 10px;
            .text
              font-weight bold;
              font-size $font-size-medium;
              color $color-text-l;
            .clear
              font-size $font-size-small;
              extend-click();
              color $color-text-l;
    .search-result
      position fixed;
      top 168px;
      bottom 0;
      width 100%;
    .slide-enter-active, .slide-leave-active {
      transition: all 0.4s;
    }

    .slide-enter, .slide-leave-to {
      transform: translate3d(100%, 0, 0);
    }
</style>
